HTML 자세히 보기 CSS 자세히 보기 JAVASCRIPT 자세히 보기 광고 준비 중 사이트 | 레이아웃20 [사이트] 복합 유형 완성 사이트 01 2022. 9. 13. [사이트] 푸터 유형 만들기 01 2022. 9. 6. [사이트] 배너 유형 만들기 01 2022. 9. 6. [사이트] 슬라이드 유형 만들기 01 2022. 9. 6. [사이트] 헤더 유형 01 사이트 만들기 헤더 유형 사이트 만들기 01 입니다. 피그마로 먼저 형태를 잡고 HTML과 CSS문서를 만들었습니다. HTML 로고 영역과 메뉴 영역 로그인 버튼이 있습니다. website 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS 메뉴와 로그인 버튼에 오버 효과를 줬습니다. 결과 원본 사이트 보기 2022. 9. 2. [사이트] 이미지/텍스트 유형 01 사이트 만들기 이미지/텍스트 유형 사이트 만들기 01 입니다. 피그마로 먼저 형태를 잡고 HTML과 CSS문서를 만들었습니다. HTML 이미지와 텍스트 영역이 있습니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 이미지와 텍스트 영역이 있습니다. /* imgTextType */ .imgText__inner { display: flex; justify-content: space-between; } .imgText__inner > div { width: 32%; heigh.. 2022. 9. 2. 텍스트 타입 사이트 만들기 03 사이트 만들기 텍스트 유형의 사이트 만들기3 입니다. 피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 박스 영역 3개가 있습니다. 텍스트 유형 01 스크립트를 익히는 방법 검색 이펙트 자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 퀴즈 이펙트 기본 메서드를 통해 자바스크립트의 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 마우스 이펙트 검색 스크립트를 완성하는 튜토리얼입니다. 자바스크립트의 기본 메서드를 통해 메서드를 검색을 쉽게 만들수 있습니다. 더보기 슬라이드 이펙트 메서드를 통해 쉽게 검색을 만들수 있습니다. 자바스크립트의 기본 메서드.. 2022. 9. 1. 텍스트 타입 사이트 만들기 02 사이트 만들기 텍스트 유형의 사이트 만들기2 입니다. 피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 큰 박스 영역과 작은 박스 영역 4개가 있습니다. 텍스트 유형 01 스크립트를 익히는 방법 검색 이펙트 자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 퀴즈 이펙트 기본 메서드를 통해 자바스크립트의 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 마우스 이펙트 검색 스크립트를 완성하는 튜토리얼입니다. 자바스크립트의 기본 메서드를 통해 메서드를 검색을 쉽게 만들수 있습니다. 더보기 슬라이드 이펙트 메서드를 통해 쉽게 검색을 만들수 있습니다. 자바.. 2022. 9. 1. 텍스트 타입 사이트 만들기 01 사이트 만들기 텍스트 유형의 사이트 만들기1 입니다. 피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 아이콘을 6개 만들었습니다. 텍스트 유형 01 스크립트를 익히는 방법 검색 이펙트 자바스크립트의 기본 메서드를 통해 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 퀴즈 이펙트 기본 메서드를 통해 자바스크립트의 검색 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들수 있습니다. 더보기 마우스 이펙트 검색 스크립트를 완성하는 튜토리얼입니다. 자바스크립트의 기본 메서드를 통해 메서드를 검색을 쉽게 만들수 있습니다. 더보기 슬라이드 이펙트 메서드를 통해 쉽게 검색을 만들수 있습니다. 자바스크립트의 기본 메서드.. 2022. 8. 30. 사이트 만들기 - 이미지 타입 03 사이트 만들기 이미지 유형의 사이트 만들기3 입니다. 피그마로 먼저 형태를 잡고 HTML과 CSS문서를 만들었습니다. HTML 아티클을 5개 만들었고 메인 이미지에는 백그라운드 이미지를 사용하였습니다. 높은 산 깊은골 적막한 산하 눈 내린 전선을 우리는 간다 젊은 넋 숨져간 그때 그 자리 상처입은 노송은 말을 잃었네 페이스북 페이지이동 페이지 페이지 페이지 전우여 들리는가 그 성난 목소리 페이스북 페이지이동 전우여 보이는가 한맺힌 눈동자 페이스북 페이지이동 푸른 숲 맑은 물 숨쉬는 산하 봄이 온 전선을 우리는 간다 페이스북 페이지이동 젊은 피 스며든 그때 그 자리 이끼 낀 바위는 말을 잊었네 페이스북 페이지이동 CSS 그리드를 이용하여 이미지 박스를 배치하였습니다. sns 태그 이미지에 백그라운드 포지션.. 2022. 8. 21. 사이트 만들기 - 이미지 타입 02 사이트 만들기5 이미지 유형의 사이트 만들기2 입니다. 피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 레이아웃을 3개의 이미지 박스로 나누어 배치 하였습니다. 마하반야 바라밀다 심경관자재보살 도일채고액 사리자 색불이공 공불이색 색즉시공 공즉시색 무안이비설신의 자세히 보기 무색성향미촉법 자세히 보기 모지사바하 자세히 보기 CSS 3개의 이미지 박스를 flex로 정렬하였고 자세히 보기 박스에 블러 효과를 주었고, 이미지에 마우스를 올리면 사진이 커지면서 밑에서 자세히 보기 박스가 올라오는 효과를 주었습니다. 결과 원본 사이트 보기 2022. 8. 17. 사이트 만들기 - 이미지 타입01 사이트 만들기4 이미지 유형의 사이트 만들기1 입니다. 피그마로 먼저 형태를 잡고 같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 레이아웃을 2개의 이미지 박스로 나누어 배치 하였습니다. 사무실은 바로 경쟁력의 원천입니다! 설계 및 시공에 대한 풍부한 커리어를 가지고 있는 사무공간 전문 인테리어 기업입니다. 기능성과 심미성을 갖춘 디자인 리빙 분야의 트렌드를 제시하고 소비자의 니즈를 반영한 기획과 풍성한 제품으로 페스티벌형 전시의 역할도 수행합니다. 자세히 보기 공간을 이루는 Total Product 공간을 이루는 구성 제품이 한자리에 모이며, 수요자와 공급자를 연결해 디자인 기반 비즈니스가 이루어질 수 있는 플랫폼입니다. 자세히 보기 CSS 2개의 박스를 flex 로 정렬하였습니다. 결과 .. 2022. 8. 17. 사이트 만들기 - 카드 유형 사이트 3 사이트 만들기3 카드 유형의 사이트 만들기3 입니다. 피그마로 먼저 형태를 만들고 똑같은 모양으로 HTML과 CSS문서를 만들었습니다. HTML 레이아웃을 3개의 박스로 나누어 배치 하였고, header 더보기 요소에 figure와 figcaption 태그를 사용했습니다. footer의 글자 효과를 다르게 주기 위해 h4 태그 안에 em 태그를 사용했습니다. 웹접근성을 위하여 이미지의 alt에 설명을 추가 했습니다. 동물원의 세계 Animals 국내 멸종위기 동물의 보존과 번식을 위하여 체계적이고 과학적인 연구가 필요합니다. 이와 같은 노력은 동물이 가진 야생의 자연스러운 행동이 나타날 수 있도록 하는 동물행동과 이를 통해 동물의 행복을 증진시키는 동물행복, 궁극적으로 동물과 인간의 행복한 동행이라는 우.. 2022. 8. 11. 사이트 만들기 - 카드 유형 사이트 2 사이트 만들기2 카드 유형의 사이트 만들기2 입니다. 피그마로 먼저 형태를 만들고 똑같은 모양으로 HTML과 CSS문서를 만들었습니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } /* common */ .container { width: 1160px; padding: 0 20px; margin: 0 auto; min-width: 1160px; } /* cardType */ .card__inner .cardTop.. 2022. 8. 10. 사이트 만들기 - 카드 유형 사이트 1 사이트 만들기 카드 유형의 사이트 만들기 입니다. 피그마로 먼저 형태를 만들고 똑같은 모양으로 HTML문서를 만들었습니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img{ width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* common */ .contain.. 2022. 8. 8. 레이아웃 배치하기 05 레이아웃05 이번 레이아웃은 화면 크기가 줄어들 때 좌우 영역으로 나눠지는 구조입니다. float을 이용한 레이아웃 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다. 결과 See th.. 2022. 7. 29. 레이아웃 배치하기 04 레이아웃04 이번 레이아웃은 단순한 구조로 float을 이용한 레이아웃 배치만 해보겠습니다. float을 이용한 레이아웃 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다. *{ mar.. 2022. 7. 29. 레이아웃 배치하기 03 레이아웃03 이번 레이아웃은 화면 크기가 줄어들때 영역 한칸이 보이지 않게 되는 구조입니다. float을 이용한 레이아웃 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다. 결과 See.. 2022. 7. 29. 레이아웃 배치하기 02 레이아웃02 이번 레이아웃은 화면 크기가 줄어들때 양사이드 영역이 눕혀지는 구조 입니다. float을 이용한 레이아웃 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다. *{ margi.. 2022. 7. 29. 레이아웃 배치하기 01 레이아웃01 이번 레이아웃은 화면 크기가 줄어들때 측면 영역이 한줄로 보이게 바뀌는 구조 입니다. float을 이용한 레이아웃 float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다. 다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다. 여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다. *{ .. 2022. 7. 29. 이전 1 다음 728x90 반응형
